<template>
<div>
    <div class="head">
        <el-row> 
             <el-col :span="3">消息总数：{{this.alarm_info.length}}</el-col>
             <el-col :span="3">未看消息：{{this.count}}</el-col>
             <el-col :span='6'>
             </el-col>
         </el-row>
    </div>
    <div class="body">
      <el-table :data="alarm_info" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
        <el-table-column fixed prop="id" label="序号" :index="indexMethod" width="80"></el-table-column>
        <el-table-column prop="time" label="报警时间" width="150"></el-table-column>
        <el-table-column prop="grade" label="级别" width="150"> </el-table-column>
        <el-table-column prop="name" label="类型" width="150"></el-table-column>
        <el-table-column prop="dev_id" label="关联设备" width="150"></el-table-column>
        <el-table-column prop="note" label="说明" width="150"></el-table-column>
        <el-table-column  align="right">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
           <template slot-scope="scope">
             <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
              <el-dialog title="设备信息" :modal=false :visible.sync="dialogFormVisible">
                <el-form :model="alarm_db">
                    <el-card class="box-card">
                     <div class="infinite-list" v-infinite-scroll="load">
         <el-row> 
             <el-col :span="4">级别</el-col>
             <el-col :span="2">:</el-col>
              <el-col :span="10">
                  <template v-if='modform'>
                          {{alarm_db.grade}}
                          </template>
                          <template v-else>
                            <el-input v-model="alarm_db.grade"></el-input>
                </template>
              </el-col>
         </el-row>
         <el-row> 
             <el-col :span="4">类型</el-col>
             <el-col :span="2">:</el-col>
             <el-col :span="10">
               <template v-if='modform'>
                          {{alarm_db.name}}
                          </template>
                          <template v-else>
                            <el-input v-model="alarm_db.name"></el-input>
                </template>
             </el-col>
             
         </el-row>
         <el-row> 
             <el-col :span="4">说明</el-col>
             <el-col :span="2">:</el-col>
             <el-col :span="10">
               <template v-if='modform'>
                          {{alarm_db.note}}
                          </template>
                          <template v-else>
                            <el-input v-model="alarm_db.note"></el-input>
                </template>
             </el-col>
         </el-row>
                  <el-row> 
             <el-col :span="4">关联设备</el-col>
             <el-col :span="2">:</el-col>
              <el-col :span="10">
               <template v-if='modform'>
                          {{alarm_db.dev_id}}
                          </template>
                          <template v-else>
                             <el-select v-model="alarm_db.dev_id" placeholder="请选择设备">
                                    <el-option v-for="item in device" :key="item.name" :label="item.name" :value="item.id">
                                    </el-option>
                            </el-select>
                </template>
             </el-col>
         </el-row>
         </div> 
          </el-card>
        </el-form>
                <div slot="footer" class="dialog-footer">
                 <template v-if="modform">
                    <el-button type="primary" @click="clickMode()">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button @click="dialogFormVisible = false">返回</el-button>
                </div>
        </el-dialog>

        <!--修改-->
             <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </div>
</div>
</template>
<script>
import axios from '../plugins/axios'  //在哪里用就在哪里引入
require('@/mock/alarm_info.js')
require('@/mock/alarm_db_oper.js')
export default {
    data() {
      return {
        alarm_info: [],
        alarm_db:{},
        search: '',
          device: [], //关联设备
        dialogFormVisible: false,
        formLabelWidth: '120px',
        oper:0,
        modform:true,
        // s:false
      }
    },
    computed:{
    count(){
        var count=0;
        for(let i=0;i<this.alarm_info.length;i++){
          if(this.alarm_info[i].status===0){
           count++;
         }
        }
        return count;        
      },
      // s(){
      //   for(let i=0;i<this.alarm_info.length;i++){
      //     if(this.alarm_info[i].status==0){
      //       this.s=true;
      //     }else{
      //       this.s=false;
      //     }
      //     return s;
      //   }
        
      // }
    },
    created:function(){

       //关联设备信息
        axios.get('/action/devices_info').then((res) => {
            this.device=res.data.device_info
            console.log(this.device);
        })

        axios.get('/action/alarm_status')
        .then(response=>{
             console.log(response);
            this.alarm_info=response.data.alarm_info;
            //console.log(this.device_info);
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })
        // axios.get('/action/alarm_db_oper')
        //       .then(response=>{
        //      //console.log(response);
        //       this.alarm_db=response.data;
        //     //console.log(this.device_db);
        // })
        //       .catch(error=>{
        //       console.log(error);
        //       alert('网络错误');
        // })
       
    },
    methods: {

      indexMethod(index) {
        for(let i=0;i<alarm_info.length;i++)
        {
          index=this.alarm_info[i].id;
        }
        return index;
      },
      load () {
        //this.count = 2;
      },
      //保存修改发送pot请求
      saveModform(){
        this.alarm_db.oper='2'
         axios.post('/action/alarm_oper',this.alarm_db)
        .then(response=>{
          
          if(response.data===0){
            axios.get('/action/alarm_status')
        .then(response=>{
             //console.log(response);
            this.alarm_info=response.data.alarm_info;
            console.log(this.alarm_info);
        })
        .catch(error=>{
           console.log(error);
           alert('网络错误');
        })
            this.modform=true;
          }
          
        })
        .catch(error=>{
           console.log(error);
           alert('网络错误');
        })
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //离线浅红，在线浅蓝
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      Search(index, row) {
        console.log(index, row);
      },
      //详情
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        let _this=this
          axios.post('/action/alarm_oper',{
            "oper": '0',
            "id": row.id           
         })
        .then(response=>{
         
            console.log(this.response);
            this.alarm_db=response.data.alarm_db;
             //this.dialogFormVisible = true;
        })
              .catch(error=>{
              console.log(error);
              this.$message.error('网络错误，请联系管理员！');
        })
      },
      handleState(index,row){
          console.log(index,row);
      },
     //删除
      handleDelete(index, row) {
        axios.post('/action/alarm_oper',{
            "oper": '1',
            "id": row.id,    
         })
        .then(response=>{
            if(response.data===0){
              this.$message({
                          message: '删除成功',
                          type: 'success'
              });

              axios.get('/action/alarm_status')
             .then(response=>{
             console.log(response);
            this.alarm_info=response.data.alarm_info;
            //console.log(this.device_info);
        })
            }
        })
              .catch(error=>{
              console.log(error);
               this.$message.error('网络错误，请联系管理员！');
        })
      },
      //点击修改
      clickMode(){
        this.modform=false
        for(let i=0;i<this.device.length;i++){
          if(this.alarm_db.dev_id==this.device[i].name){
            this.alarm_db.dev_id=this.device[i].id
          }
        }
      },
          //保存修改报警信息
      saveModform(){
        this.alarm_db.oper='2'
       axios.post('/action/alarm_oper', this.alarm_db)
        .then(response=>{   
          if(response.data===0){
              this.$message({
                          message: '修改成功',
                          type: 'success'
                     });
               this.dialogFormVisible=false;
               axios.get('/action/alarm_status')
        .then(response=>{
             console.log(response);
            this.alarm_info=response.data.alarm_info;
            //console.log(this.device_info);
        })
            this.modform=true;
          }
          
        })
        .catch(error=>{
           console.log(error);
           alert('网络错误');
        })
      },

    },

}
</script>
<style scoped>
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

.head{
    position:absolute;
    top:15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    border: 1px solid black;
}
.button{
    position:absolute;
    left: 90%;
}
.body{
    position:absolute;
    top:23%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}

</style>


